<template>
  <div class="swiper_container">
    <swiper :options="swiperOption"
            class="swiper_box">
      <!-- slides -->
      <swiper-slide><img class="swiper-img"
             src="../assets/img/banner1.jpeg" /></swiper-slide>
      <swiper-slide><img class="swiper-img"
             src="../assets/img/banner2.jpeg" /></swiper-slide>
      <swiper-slide><img class="swiper-img"
             src="../assets/img/banner3.jpeg" /></swiper-slide>
      <swiper-slide><img class="swiper-img"
             src="../assets/img/banner4.jpeg" /></swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination"
           slot="pagination"></div>
      <div class="swiper-button-prev"
           slot="button-prev"></div>
      <div class="swiper-button-next"
           slot="button-next"></div>
      <div class="swiper-scrollbar"
           slot="scrollbar"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        observer: true,//修改swiper自己或子元素时，自动初始化swiper 
        observeParents: true,//修改swiper的父元素时，自动初始化swiper 
        loop: true,
        autoplay: {
          delay: 2000,
          disableOnInteraction: false
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.swiper_container {
  width: 100%;
  .swiper_box {
    width: 100%;
    .swiper-img {
      width: 100%;
    }
  }
}
</style>